<template>
  <a-modal
      class="edit-modal"
      title="编辑策略"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      :afterClose="remove"
  >
    <a-table
        :loading="tableLoading"
        :columns="columns"
        :data-source="data"
        :customRow="customRow"
        rowKey="id"
        :scroll="{y: 220}"
        size="small">
    </a-table>
    <dynamic-form ref="dynamicForm" :dynamic-validate-form="dynamicValidateForm"/>
    <template v-slot:footer>
      <div class="footer-btns">
        <a-button @click="validate('add')" type="primary">添加</a-button>
        <a-button @click="validate('change')" :disabled="!id" type="warning">修改</a-button>
        <a-button @click="deleteRow" :disabled="!id" type="danger">删除</a-button>
        <a-button @click="visible = false">取消</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs, ref, createVNode} from 'vue'
import {strategyCreate, gwpList, gwpCreate, gwpUpdate, gwpDelete} from '@/api/policy'
import dynamicValidateForm from "./edit-schema"
import {Modal, Table, Button, message} from 'ant-design-vue'
import {ExclamationCircleOutlined} from '@ant-design/icons-vue'
import {useAsync} from "@/hooks"
import DynamicForm from '@/components/dynamic-form/dynamic-form.vue'

const columns = [
  // port 进程端口
  // process 受保护进程
  // protocol 协议类型{所有:0,TCP协议:6,UDP协议:17}
  {
    title: '监控进程',
    dataIndex: 'process',
  },
  {
    title: '进程端口',
    dataIndex: 'port',
  },
  {
    title: '协议类型',
    dataIndex: 'protocol',
    slots: {customRender: 'protocol'}
  },
]

export default defineComponent({
  name: "gateway-edit",
  components: {[Modal.name]: Modal, [Table.name]: Table, DynamicForm, [Button.name]: Button},
  props: {
    remove: { // 移除模态框
      type: Function
    },
    strategyid: {
      type: [String, Number]
    },
    callback: {
      type: Function
    }
  },
  setup(props) {
    const dynamicForm = ref<any>(null)

    const state = reactive({
      data: [],
      visible: true,
      id: '',
      tableLoading: false,
      confirmLoading: false,
      dynamicValidateForm: dynamicValidateForm
    })

    // 获取监控进程列表
    const getGwpList = async () => {
      state.tableLoading = true
      state.data = await gwpList({strategyid: props.strategyid}).finally(() => state.tableLoading = false)
    }

    getGwpList()

    // 添加记录
    const add = () => {
      delete dynamicForm.value.modelRef.id
      return useAsync(gwpCreate(dynamicForm.value.modelRef), {
        ref: state,
        loadingName: 'confirmLoading'
      })
    }

    // 修改记录
    const change = () => {
      return useAsync(gwpUpdate(dynamicForm.value.modelRef), {
        ref: state,
        loadingName: 'confirmLoading'
      })
    }

    // 删除记录
    const deleteRow = () => {
        Modal.confirm({
          title: '确定要删除该条记录吗?',
          icon: createVNode(ExclamationCircleOutlined),
          centered: true,
          onOk: async () => {
             await useAsync(gwpDelete({id: state.id}), {
              ref: state,
              loadingName: 'confirmLoading'
            })
            state.id = ''
            getGwpList()
          }
        })
    }

    // 验证表单
    const validate = (operateType) => {
      const obj = {
        add: add,
        change: change
      }
      state.confirmLoading = true
      dynamicForm.value.validate()
          .then(async res => {
            dynamicForm.value.modelRef.strategyid = props.strategyid
            await obj[operateType]()
            getGwpList()
          })
          .catch(err => {
            console.log('error', err)
            state.confirmLoading = false
          })
    }

    const customRow = (record) => ({
      class: {
        active: state.id == record.id
      },
      onclick: (event) => {
        state.id = record.id
        Object.assign(dynamicForm.value.modelRef, record)
      }
    })

    return {
      ...toRefs(state),
      customRow,
      deleteRow,
      validate,
      columns,
      dynamicForm,
    }
  }
})
</script>

<style lang="scss" scoped>
::v-deep(.ant-table) {
  .active {
    background-color: #e6f7ff;
  }

  .ant-table-body {
    margin: 0;
  }
}

.footer-btns {
  display: flex;
  justify-content: space-evenly;
}
</style>
